<template>
  <div class="water-user-tie-card">
    <div class="head">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/bg_vip.png" />
      <div style="padding: 1.5625rem 1.6875rem; color: #fff; box-sizing: border-box;">
        <div style="text-align: left;">
          <span class="fz-50 fw-600">会员卡</span>
        </div>
        <div class="flex-between-end mt25">
          <div>
            <span class="fw-600">暂无会员卡</span>
          </div>
          <div>0.00元</div>
        </div>
      </div>
    </div>
    <div class="box">
      <div @click="show = true" class="felx-column">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_card.png"
          alt />
        <span class="mt-11">绑卡</span>
      </div>
      <router-link :to="fun.getUrl('water_machine_no_card', {}, { device_no })" tag="div" class="felx-column ml-90">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_nocard.png"
          alt />
        <span class="mt-11">无卡打水</span>
      </router-link>
      <div  class="felx-column ml-90" @click="goto">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_class.png"
          alt />
        <span  class="mt-11">{{ course_name }}</span>
      </div>
    </div>
    <van-dialog use-slot v-model="show" show-cancel-button @close="show = false" @confirm="confirm">
      <div class="box-popup">
        <div class="flex-center" style="margin-bottom: 1.1875rem;">
          <span>会员卡号</span>
          <input v-model="card_no" placeholder="请输入会员卡号" type="text" />
        </div>
        <!-- <div class="flex-center" style="margin-bottom: 1.1875rem;">
          <span>商家账号</span>
          <input v-model="account" placeholder="请输入商家账号" type="text" />
        </div> -->
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      card_no: "",
      device_no:"",
      account: "",
    };
  },
  props: {
    course_name:{
      type:String,
      default:"教程"
    },
    url: {
      type: String,
      default: ""
    },
  },
  activated() {
    this.device_no = this.$route.query.device_no;
    this.get_detail();
  },
  methods: {
    goto() {
      window.open(this.url, "_blank");
    },
    async get_detail(){
      let { result, data } = await $http.post('plugin.water-machine.frontend.consumer.device.show', {device_no:this.$route.query.device_no},'')
      if(result){
        this.account = data.belongs_to_merchant.account;
      }
    },
    async confirm() {
      let json = {
        card_no: this.card_no,
        account: this.account
      }
      let { result, msg } = await $http.post('plugin.water-machine.frontend.consumer.member-card.bind', json,"")
      this.$toast(msg)
      if (result) {
        this.$router.push(this.fun.getUrl('water_machine_card'))
      }
    }
  }
};
</script>

<style scoped lang="scss">
.water-user-tie-card {
  .felx-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box {
    display: flex;
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.9375rem 1.25rem;
    margin: 0.9375rem 0.75rem;

    img {
      width: 1.5rem;
      height: 1.5rem;
      margin: 0;
    }
  }

  .box-popup {
    padding: 2rem 0.8125rem 1.0625rem;
  }

  .mt-11 {
    margin-top: 0.3438rem;
  }

  .mt25 {
    margin-top: 1.7813rem;
  }

  .fz-56 {
    font-size: 1.75rem;
  }

  .flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fz-50 {
    font-size: 1.5625rem;
  }

  .fw-600 {
    font-weight: 600;
  }

  .head {
    position: relative;
    color: #fff;
  }

  .head img {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 10.5625rem;
    z-index: -1;
  }

  .card-water {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.0625rem;
    font-size: 0.875rem;
    color: #ef5452;
  }

  .tie-card {
    margin: 8.1875rem auto;
    width: 11.25rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 2.5rem;
    color: #fff;
    background: #fe5e56;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
  }

  text {
    flex-shrink: 0;
    text-align: left;
  }

  input {
    border: 0.0625rem solid #bbb;
    padding: 0.625rem;
    margin-left: 0.6875rem;
    border-radius: 0.625rem;
    flex: 1;
  }

  .ml-90 {
    margin-left: 2.8125rem;
  }
}
</style>
